<template>
  <div>
    <div class="top-title">
      您现在设置的是:【<span>{{ className }}</span
      >】教学班的选修课参数
    </div>
    <div class="manual-entry-container">
      <div>
        <ul>
          <li>
            <span class="active">培养层次限制</span>
            <div>
              <el-radio-group v-model="pyccxz">
                <el-radio label="无限制">无限制</el-radio>
                <el-radio label="仅课程针对的培养层次可选"
                  >仅课程针对的培养层可选</el-radio>
              </el-radio-group>
            </div>
          </li>
          <li>
            <span class="active">部系限制</span>
            <div>
              <el-radio-group v-model="bxxz">
                <el-radio label="无限制">无限制</el-radio>
                <el-radio label="仅课程开课部系学员可选"
                  >仅课程开课部系学员可选</el-radio
                >
              </el-radio-group>
            </div>
          </li>
          <li>
            <span class="active" style="height: 220px; line-height: 140px;">专业班次限制</span>
            <div>
              <el-radio-group v-model="zyxz">
                <el-radio label="无限制">无限制</el-radio>
                <el-radio label="仅以下专业可选">仅以下专业班次可选</el-radio>
                <el-radio label="除以下专业可选">除以下专业班次可选</el-radio>
              </el-radio-group>
              <div class="select-major">
                <div class="select-show">
                  <span :label="item.id" v-for="item in classSelectList" >{{item.className}}</span>
                </div>
                <div style="margin-left: 20px; display: flex; flex-direction: column">
                  <div class="button-style" style="width: 75px;" @click="selectZYBC">
                    <span>添加</span>
                  </div>
                  <div class="button-style" style="width: 75px; margin-top: 15px; background: #FFEEEF; border: 1px solid #FA533C;" @click="cancelCourseZYXZ">
                    <span style="color: #FA533C;">移出</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="active">年级限制</span>
            <div>
              <div style="margin-bottom: 20px">
                <el-radio-group v-model="njxz">
                  <el-radio label="无限制">无限制</el-radio>
                  <el-radio label="以下年级可选">以下年级可选</el-radio>
                </el-radio-group>
              </div>
              <div>
                <el-checkbox-group v-model="njkx">
                  <el-checkbox :label="item.id" v-for="item in gradeList" :key="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </li>
          <li>
            <span class="active">性别限制</span>
            <div>
              <el-radio-group v-model="xbxz">
                <el-radio label="无限制">无限制</el-radio>
                <el-radio label="仅男生">仅男生</el-radio>
                <el-radio label="仅女生">仅女生</el-radio>
              </el-radio-group>
            </div>
          </li>
        </ul>
      </div>
      <div class="btn-caozuo">
        <div class="button-style" style="min-width: 75px; margin-top: 13px; background: #FFF6F0; border: 1px solid #E9B535;" @click="setClassXz">
          <span style="color: #E9B535;">保存</span>
        </div>
        <div class="button-style" style="min-width: 75px; margin: 13px 0 0 80px; background: #FFEEEF; border: 1px solid #FA533C;" @click="cancelClassXz">
          <span style="color: #FA533C;">取消</span>
        </div>
      </div>
    </div>
    <el-dialog title="选择专业班次" :visible.sync="showAddMessageDialog" width="1300px" class="xzzybc">
      <el-form label-suffix="：" label-position="left" style="display: flex;">
        <el-form-item label-width="85px" label="培养层次">
          <el-select v-model="pyLevel" size="mini" clearable placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;" @change="handleChangeLevel">
            <el-option v-for="(item, index) in treeData" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        border
        :height="460"
        :data="majorTableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        @selection-change="handleZYBCSelectionChange">
        <el-table-column align="center" type="selection" width="60" />
        <el-table-column prop="className" label="专业班次" align="center" />
        <el-table-column prop="alias" label="别名" align="center" />
        <el-table-column prop="studentTeam" label="学员队" align="center" />
        <el-table-column prop="specialtyName" label="专业" align="center" />
        <el-table-column prop="year" label="年级" align="center" />
        <el-table-column prop="campus" label="所在校区" align="center" />
        <el-table-column prop="ratedNumber" label="额定人数" align="center" />
      </el-table>
      <div style="display: flex; flex-direction: row-reverse; margin: 15px 0;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
          style="padding: 0;">
        </el-pagination>
      </div>
      <div style="display: flex; justify-content: center;">
        <div class="button-style" style="border-color: #F3B815; background-color: #FFF6EF; margin-right: 15px;" @click="submitChangeClassState">
          <span style="color: #F3B815;">确&emsp;定</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {bpksj_query_specialty, xxkkkgl_JH_getClassNameByClassNo, xxkkkgl_JH_setClassXz, queryCommonNj, queryCommonPycc } from "@/api/trainingManagement/place.js";
export default {
  name: "",
  data() {
    return {
      pyLevel: '',
      zyxz: "无限制", //专业限制
      pyccxz: "无限制", //培养层次限制
      bxxz: "无限制", //部系限制
      xbxz: "无限制", //性别限制
      njxz: "无限制", //年级限制
      njkx: [], //年级可选
      tableData: [],
      showAddMajorDialog: false,
      classNameList: [], //课程名称列表
      className: '',
      classSelectList: [], //选中课程数据\
      gradeList: [], //年级列表
      treeData: [],//
      selectTreeRow: {}, //
      total1: 0, //总条数
      pageSize1: 10, //条数
      startPage1: 0, //开始条数
      endPage1: 0, //结束条数
      currentPage1: 1, //当前页数
      selectZybcList: [], //专业班次列表
      selectZybcListShow: [], //专业班次
      majorTableData: [], //
      showAddMessageDialog: false, //专业班次弹窗
    };
  },
  mounted() {
    let array = []
    this.queryList = this.$route.query.queryList
    this.queryList.forEach(item => {
      array.push(item.className)
    })
    this.className = array.join('、')
    // this.queryXKYQ();
    this.queryCommonNj();
    this.queryCommonPycc();
  },
  methods: {
    cancelChangeClassState() {
      this.selectZybcList = [];
      this.showAddMessageDialog = false;
    },
    // 选中专业班次
    async submitChangeClassState() {
      if (this.selectZybcList.length > 0) {
        this.classSelectList = this.selectZybcList;
        this.showAddMessageDialog = false;
      } else {
        this.$message.warning("请选择一条专业班次!");
        return;
      }
    },
    handleZYBCSelectionChange(val) {
      this.selectZybcList = val;
    },
    // 选中专业班次
    selectZYBC() {
      this.queryCommonPycc();
      this.showAddMessageDialog = true;
    },
    async queryCommonPycc() {
      const res = await queryCommonPycc();
      if (res.data.code == 200) {
        console.log(res.data.data,111111111111)
        this.treeData = res.data.data;
        this.selectTreeRow = this.treeData[0];
        this.queryZybcList();
      }
    },
    handleChangeLevel() {
      this.queryZybcList()
    },
    // 查询专业班次数据列表
    async queryZybcList() {
      const trainingLevel = this.pyLevel;
      const current = this.currentPage1;
      const size = this.pageSize1;
      const res = await bpksj_query_specialty(
        trainingLevel,
        '',
        '',
        current,
        size
      );
      if (res.data.code === 200) {
        this.majorTableData = res.data.data.records;
        this.total1 = res.data.data.total;
        var length = this.majorTableData.length;
        this.calculatePage1(this.pageSize1, res.data.data.current, length);
      }
    },
    // 计算开始和结束条数
    calculatePage1(pageSize, current, length) {
      if (current == 1) {
        if (length != 0) {
          this.startPage1 = 1;
          this.endPage1 = length;
        }
      } else {
        this.startPage1 = pageSize * (current - 1) + 1;
        this.endPage1 = parseInt(this.startPage1) + parseInt(length) - 1;
      }
    },
    handleDialogCurrentChange() {
      this.currentPage1 = val;
      this.queryZybcList();
    },
    // 获取年级列表
    async queryCommonNj() {
      const res = await queryCommonNj("");
      if (res.data.code == 200) {
        this.gradeList = res.data.data;
        this.gradeList = [
    {
        "id": "2022",
        "code": "",
        "name": "2022"
    },
    {
        "id": "2019",
        "code": "",
        "name": "2019"
    },
    {
        "id": "2020",
        "code": "",
        "name": "2020"
    },
    {
        "id": "2016",
        "code": "",
        "name": "2016"
    },
]
      }
    },
    cancelCourseZYXZ() {
      this.showAddMajorDialog = false;
      this.classSelectList = [];
    },
    // 取消
    cancelClassXz() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push("/admin/elective/startClassManagement");
    },
    // 设置选课要求-提交
    async setClassXz() {
      let yearArray = []
      if (this.njxz === "以下年级可选") {
        if (this.njkx.length > 0) {
          this.njkx.forEach((item) => {
            yearArray.push(item)
          });
        } else {
          this.$message.warning("请先选择年级！");
          return;
        }
      }
      if (this.zyxz !== '无限制' && this.classSelectList.length === 0) {
        this.$message.warning("请添加专业班次！");
        return
      }
      let classArray = [], speArray = []
      this.queryList.forEach(item => {
        classArray.push(item.classNo)
      })
      this.classSelectList.forEach(item => {
        speArray.push(item.yearSpecialtyId)
      })
      var params = {
        pyccxz: this.pyccxz,
        bxxz: this.bxxz,
        zybcbkxxz: speArray.join(','),
        zybckxxz: speArray.join(','),
        njxz: yearArray.join(','),
        xbxz: this.xbxz,
        classno: classArray.join(',')
      }
      const res = await xxkkkgl_JH_setClassXz(params);
      if (res.data.code == 200) {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.push("/admin/elective/startClassManagement")
        this.$message.success("选课要求设置成功!");
      }
    },
    toBarcodeEntry() {},
    // 获取课程名称列表
    async queryXKYQ() {
      const res = await xxkkkgl_JH_getClassNameByClassNo(this.queryList);
      if (res.data.code == 200) {
        this.classNameList = res.data.data;
      }
    },
    handleCurrentChange: function (val) {
      this.currentPage1 = val
      this.queryZybcList()
    },
    handleSizeChange: function (val) {
      this.pageSize1 = val
      this.queryZybcList()
    }
  },
};
</script>


<style lang="less" scoped>
.wrapper-container .search-container .search-container-left {
  flex-wrap: wrap;
  .search-container-item {
    width: 12%;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
      /deep/ .el-input__inner {
        height: 28px;
      }
    }
  }
}

/deep/.el-date-editor.el-input {
  width: 110px;
}
/deep/ .el-input--medium {
  width: 110px;
  .el-input__inner {
    height: 28px;
    width: 110px;
    padding: 0px 18px;
  }
}
/deep/ .el-table thead {
  color: #004ca7 !important;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;
  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
</style>

<style scoped lang="less">
.manual-entry-container {
  > div:nth-child(1) {
    width: 100%;
    // height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 25px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        display: flex;
        align-items: center;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 100px;
          padding-top: 40px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:nth-child(2n) {
            width: 444px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
        }
        > div {
          width: 800px;
          margin-left: 100px;
        }
      }
      &:nth-child(1) {
        li {
          > span {
            height: 100px;
          }
          > div {
            width: 800px;
            margin-left: 100px;
          }
        }
      }
      &:nth-child(3) {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          display: flex;
          align-items: center;
          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 60px;
            &:nth-child(1) {
              width: 144px;
            }
            &:nth-child(2) {
              width: 180px;
            }
            &:nth-child(3) {
              width: 289px;
            }
            &:nth-child(4) {
              width: 196px;
            }
            &:nth-child(5) {
              width: 197px;
            }
            &:nth-child(6) {
              width: 197px;
            }
            &:nth-child(7) {
              width: 198px;
              padding-top: 8px !important;
              > span {
                display: inline-block;
                width: 121px;
                height: 28px;
                border: 1px solid #5230e9;
                background: rgba(235, 230, 255, 1);
                opacity: 1;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
                color: #5230e9;
                line-height: 18px;
                margin-top: 8px;
                padding: 5px 10px;
                cursor: pointer;
              }
            }
            &:nth-child(8) {
              width: 150px;
            }
            &:nth-child(9) {
              width: 182px;
            }
            &.active {
              border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }
          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;
              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }
                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  .button-group {
    text-align: center;
    margin-top: 36px;
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
  .select-show {
    width: 420px;
    height: 120px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    color: #004ca7;
    overflow-y: auto;
    > span {
      padding: 10px;
    }
  }

  .select-major {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
}
.top-title {
  //margin-top: 30px;
  //margin-bottom: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #004ca7;
  > span {
    color: #ff3819;
  }
}
.btn-caozuo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}
</style>
<style lang="less" scoped>
.el-dialog__body {
  .assessment-container {
    width: 100%;
    // .search-container-left .search-container-item .box {
    //   /deep/ .el-input__inner {
    //     height: 28px !important;
    //   }
    // }
    .table-container {
      height: 380px;
      overflow-y: auto;
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}
.el-dialog__footer {
  padding: 10px 20px 45px;
}
.el-checkbox__inner:hover {
  border-color: #004ca7;
}
.el-checkbox__inner {
  border: 1px solid #004ca7;
  border-radius: 0;
  height: 18px;
  width: 18px;
}
.el-checkbox__inner::after {
  height: 10px;
  left: 6px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #004ca7;
  border-color: #004ca7;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #004ca7;
}
.el-checkbox.is-bordered.is-checked {
  border-color: #004ca7;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #004ca7;
}

.query-btn {
  .el-input {
    /deep/ .el-input__inner {
      height: 28px;
    }
  }
}

.assessment-container {
  width: calc(100% - 20px);
  .table-container {
    width: 100%;
  }
}

@import "../../../../styles/supervision.less";


.xzzybc {
  /deep/ .el-dialog {
    height: 720px;
  }
}

.wrapper-container .search-container .search-container-left {
  width: 100%;
  flex-wrap: wrap;
  .search-container-item {
    width: 12%;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
    }
  }
}

.bottom-block {
  // display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}


.assessment-container {
  // width: calc(100% - 40px);
  // margin: 20px;
  // margin-top: 0;
  width: calc(100% - 20px);
  margin: 10px;
  margin-top: 0;
  /deep/ .table-container {
    width: 100% !important;
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 76px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }

    .wrapper-button {
      display: flex;
      flex-direction: column;
      align-items: center;

      > div {
        margin-bottom: 8px;
      }
    }
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}

@import "../../../../styles/text.less";
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>

